<template>
  <div class="dictionary-manage-view">
    <div class="dictionary-manage-top">
      <el-button-group class="button-group">
        <el-button type="primary" @click="addDictionary">添加</el-button>
      </el-button-group>
      <div class="top-seach">
        <el-input placeholder="请输入内容" v-model="dictionarySeach" class="input-with-select">
          <el-button slot="append" @click="findDictionary">查询</el-button>
        </el-input>
      </div>
    </div>
    <div class="dictionary-manage-table"
         v-loading="isLoading"
         element-loading-text="数据加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(21, 29, 54, 0.8)"
    >
      <el-table
        :data="tableData"
        height="100%"
        border
        style="width: 100%"
        highlight-current-row
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="index"
          label="序号"
          width="70">
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="datacode"
          label="参数名"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="datavalue"
          label="参数值"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="datatype"
          label="参数类型"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="sortno"
          label="字典序号"
          width="80"
        >
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="datadesc"
          label="参数描述"
        >
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="delDic(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dictionary-manage-paging">
      <el-pagination
        layout="total, sizes, prev, pager, next"
        background
        :page-size="pageSize"
        :total="total"
        :page-count="10"
        :page-sizes="[5, 10, 20, 40]"
        :current-page="currentPage"
        @current-change="changePage"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog title="添加字典" :visible="addDicdialog" width="30%" @close="addDicClose" :close-on-click-modal="false">
      <el-form label-width="100px" :model="formLabelAlign" ref="addDicform" :rules="addDicRules">
        <el-form-item label="参数名" prop="datacode">
          <el-input v-model="formLabelAlign.datacode" placeholder="参数名"></el-input>
        </el-form-item>
        <el-form-item label="参数值" prop="datavalue">
          <el-input v-model="formLabelAlign.datavalue" placeholder="参数值"></el-input>
        </el-form-item>
        <el-form-item label="参数类型" prop="datatype">
          <el-input v-model="formLabelAlign.datatype" placeholder="参数类型"></el-input>
        </el-form-item>
        <el-form-item label="参数描述">
          <el-input v-model="formLabelAlign.datadesc" placeholder="参数描述"></el-input>
        </el-form-item>
        <el-form-item label="字典序号" prop="sortno">
          <el-input v-model="formLabelAlign.sortno" placeholder="序号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCancel">取消</el-button>
        <el-button type="warning" @click="addKeep">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {

    components: {
      // name
    },
    name: "dictionaryManageView",
    props: {
      // 加载状态
      isLoading: {
        type: Boolean,
        default: false
      },
      // 总条数
      total: {
        type: Number,
        default: 10
      },
      // 每页条数
      pageSize: {
        type: Number,
        default: 10
      },
      tableData: {
        type: Array,
        default: []
      },
      // 当前页
      currentPage: {
        type: Number,
        default: 1
      },
      // 添加字典表单
      formLabelAlign: {
        type: Object,
        default: {}
      },
      // 弹窗状态
      addDicdialog: {
        type: Boolean,
        default: false
      }
      // msg: String //  [name: typeof]
    },
    filters: {},
    computed: {},
    watch: {},
    data() {

      let nameRules = (rule, value, callback) => {
        let reg = /^[^\d.\-\[\]{}+=_;:'"<>?/\\，,。、‘’“”；：【】|——]/;
        // let reg = /^[^\d.\-\[\]{}+=_;:'"<>?/\\，,。、‘’“”；：【】|——]+\d$/;
        if (!value) {
          return callback(new Error('参数名不能为空'));
        } else if (!reg.test(value)) {
          return callback(new Error('参数名不能以特殊字符和数字开头'));
        } else {
          callback();
        }
      };

      let datavalue = (rule, value, callback) => {
        let reg = /^\w+$/;
        if (!value) {
          return callback(new Error('参数值不能为空'));
        } else if (!reg.test(value)) {
          return callback(new Error('请输入正确的参数值，由数字、字母、下划线组成'));
        } else {
          callback();
        }
      };


      let datatype = (rule, value, callback) => {
        let reg = /^\w+$/;
        if (!value) {
          return callback(new Error('参数类型不能为空'));
        } else if (!reg.test(value)) {
          return callback(new Error('请输入正确的参数类型，由数字、字母、下划线组成'));
        } else {
          callback();
        }
      };

      let sortno = (rule, value, callback) => {
        let reg = /\d+/;
        if (!value) {
          return callback(new Error('序号不能为空'));
        } else if (!reg.test(value)) {
          return callback(new Error('请输入正确的序号，数字0-9组成'));
        } else {
          callback();
        }
      };

      return {
        dictionarySeach: '', // 搜索框
        addDicRules: {
          datacode: [
            {required: true, validator: nameRules, trigger: 'blur'},
            {min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur'}
          ],
          datavalue: [
            {required: true, validator: datavalue, trigger: 'blur'}
          ],
          datatype: [
            {required: true, validator: datatype, trigger: 'blur'}
          ],
          sortno: [
            {required: true, validator: sortno, trigger: 'blur'}
          ]
        }
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      // 添加字典
      addDictionary() {
        this.$emit('addDictionary');
      },
      // 查找字典
      findDictionary() {
        this.$emit('findDictionary', this.dictionarySeach);
      },
      // 改变当前页
      changePage(page) {
        this.$emit('changePage', page);
      },
      // 改变每页条数
      sizeChange(num) {
        this.$emit('sizeChange', num);
      },
      // 关闭弹窗回调
      addDicClose() {
        this.$emit('addDicClose');
      },
      // 取消添加
      addCancel() {
        this.$emit('addCancel');
      },
      // 保存添加
      addKeep() {
        this.$emit('addKeep');
      },
      // 删除字典
      delDic(index, row) {
        this.$emit('delDic', index, row);
      },

    },
    destroyed() {

    }
  }
</script>

<style scoped lang="less">
  @import url("./dictionaryManage");
</style>
